<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <h3>{{ issue_date }}</h3>
        <div style="width: 400px;">
            <component class="mt10" v-if="id == 0" :is="labourerSelect" :data=ruleForm.labourer_id @onLabourerSelect="onLabourerSelect" />
            <h2 v-else>{{ ruleForm.labourer.name }}</h2>
        </div>
        
        <el-descriptions class="mt30" border :column="4" title="工资发放" size="small">
            <el-descriptions-item label="发放周期" align="center" >
                <el-form-item prop="period">
                    <el-input v-model="ruleForm.period" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="应发工资" align="center" >
                <el-form-item prop="pay">
                    <el-input v-model="ruleForm.pay" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="扣除项" align="center" >
                <el-form-item prop="deductions">
                    <el-input v-model="ruleForm.deductions" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="实发工资" align="center" >
                <el-form-item prop="price">
                    <el-input v-model="ruleForm.price" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="发放日期" align="center" >
                <el-form-item prop="payment_date">
                    <el-date-picker style="width: 100%;" v-model="ruleForm.payment_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="发放状态" align="center" >
                <el-form-item prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :value="0" size="large">未发放</el-radio>
                        <el-radio :value="1" size="large">发放完成</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式" align="center" >
                <el-form-item prop="payment_method">
                    <el-input v-model="ruleForm.method" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="备注" align="center" >
                <el-form-item prop="remarks">
                    <el-input v-model="ruleForm.remarks" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="发放凭证" >
                <el-image style="width: 100px; height: 100px" @click="onUploadFile('files')" :src="ruleForm.files ? ruleForm.files : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <div class="mt20 text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="upload" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import http from '../../../util/request';
import { useRouter } from 'vue-router';
import upload from '@/components/upload.vue'
import labourerSelect from '@/components/labourerSelect.vue'
import router from '../../../router';
const loading = ref<boolean>(false)
const id:any = ref(useRouter().currentRoute.value.params.id)
const issue_date:any = ref(useRouter().currentRoute.value.params.date)
let uploadData:any = ref({prefix:'user/',type:''})
const showUpload = ref<boolean>(false)

interface RuleForm {
    id:number
    labourer_id:number
    name:string
    avatar:string
    mobile:string
    period: string
    pay: string
    deductions: string
    price: string
    payment_date: string
    status: number
    method: string
    remarks:string
    files:string
    labourer:any
    issue_date:string
} 

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    labourer_id:0,
    name:'',
    avatar:'',
    mobile:'',
    period: '',
    pay: '',
    deductions:'',
    price:'',
    payment_date:'',
    status:0,
    method:'/',
    remarks:'/',
    files:'',
    labourer:{id:0,name:''},
    issue_date:''
})

const onGetData = () => {
    if(!id.value || id.value == 0){
        return
    }
    http.get('/labourerWage/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
        }
    })
}

const rules = reactive<FormRules<RuleForm>>({
    period: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 30, message: '范围在2-30字之间', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/labourer/wage',ruleForm.value)
            }else{
                request = http.put('/labourer/wage',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                onGetData()
            })
                      
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    ruleForm.value.issue_date = issue_date.value
    onGetData()
})

const onUploadFile = (type:string) => {
    uploadData.value.type = type
    if(type == 'files'){
        uploadData.value.image = ruleForm.value.files
    }
    if(type == 'avatar'){
        uploadData.value.image = ruleForm.value.avatar
    }
    uploadData.value.id = id.value
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'avatar'){
        ruleForm.value.avatar = data
    }
    if(uploadData.value.type == 'files'){
        ruleForm.value.files = data
    }
    showUpload.value = false
}

const onLabourerSelect = (id:number) => {
    ruleForm.value.labourer_id = id
}

</script>
<style scoped>
.el-form-item{margin-bottom: 0px !important;}
</style>
